<template>
	<div class="container">
		<van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '发票管理' : ''" @click-left="handleBack" />

		<div class="fapiaoList" v-if="fapiaoList.length>0">
			<div class="fapiaoList-item" v-for="(item,index) in fapiaoList">
				<div class="fapiaoList-item-head">
					<span>{{dayjs.unix(item.addtime).format("YYYY-MM-DD HH:mm:ss")}}</span>
					<span style="color: #999;" v-if="item.status=='1'">申请中</span>
					<span style="color: green;" v-if="item.status=='2'">同意</span>
					<span style="color: red;" v-if="item.status=='3'">拒绝</span>
				</div>
				<div class="fapiaoList-item-info" v-if="item.title!=''">
					<span>备注：</span>
					<span>{{item.title}}</span>
				</div>
				<div class="fapiaoList-item-info">
					<span>发票金额：</span>
					<span>{{item.price}}</span>
				</div>
				<div class="fapiaoList-item-info">
					<span>证据图片：</span>
					<van-image width="100" height="100" :src="item.images" />
				</div>
				<!-- <div>
					<span>状态：</span>
					<span v-if="item.status=='1'">申请中</span>
					<span v-if="item.status=='2'">同意</span>
					<span v-if="item.status=='3'">拒绝</span>
				</div> -->
				<div class="fapiaoList-item-info" style="justify-content: flex-end;">

					<van-button size="small" @click="downLoad(item)" width="100" height="100"
						v-if="item.url!=''&&item.status==2" type="primary">下载发票</van-button>
				</div>
			</div>
		</div>
		<div class="emptyUserList" v-else>
			<van-empty image-size="50" description="暂无开票记录" />
		</div>
		<!-- 兑换规则 -->
		<div class="getTicket">
			<van-button block @click="getTicket" type="primary">申请开票</van-button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {
		getCookie
	} from "@/utils/index";
	import {
		ref,
		reactive
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		isWeixin
	} from "@/utils/index";
	import {
		fapiaolist, fapiaoadd
	} from "@/api/user";
	import {
		showToast,
	} from 'vant';
	import {
		json
	} from "stream/consumers";
	import dayjs from "dayjs";
	const router = useRouter();
	const route = useRoute();
	const tgInfo = ref();
	const tgUser = ref();
	const pageNo = ref(1);
	const pageSize = ref(15);
	const fapiaoList = ref();
	const status = ref(0);
	// 获取推广信息
	const getFapiao = async () => {
		let result = await fapiaolist({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
			status: Number(status.value),
			pageNo: Number(pageNo.value),
			pageSize: Number(pageSize.value)
		});
		fapiaoList.value = result.data.data;
	};
	getFapiao();


	const handleBack = () => {
		if (history.state?.back) {
			router.back();
		} else {
			router.push("/user");
		}
	};

	const getTicket = () => {
		router.push("/takeTicket");
	}


	const downLoad = (item : any) => {
		let oInput = document.createElement("input");
		oInput.value = item.url;
		document.body.appendChild(oInput);
		oInput.select(); // 选择oInput中所有文本对象
		if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//兼容ios
			if (!document.execCommand("Copy")) {
				oInput.setSelectionRange(0, oInput.value.length);
			}
		}
		document.execCommand("Copy"); // 执行浏览器复制命令
		document.body.removeChild(oInput);
		return new Promise((resolve, reject) => {
			if (document.execCommand("Copy")) {
				resolve(item.url);
				showToast({
					message: "下载链接已复制，请打开外部浏览器进行下载",
					position: "top",
				});
			} else {
				reject(item.url);
			}
		})

	}
</script>

<style>
	.container {
		margin-top: 60px;
	}

	.getTicket {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
	}
	.fapiaoList {
		padding-bottom: 40px;
	}
	.fapiaoList-item {
		background: #fff;
		margin: 10px;
		filter: drop-shadow(2px 2px 3px #e5e5e5);
		border-radius: 10px;
		padding: 20px;
	}

	.fapiaoList-item-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fapiaoList-item-head>span:first-child {
		font-size: 14px;
		font-weight: bolder;
	}

	.fapiaoList-item-info {
		display: flex;
		margin: 10px 0;
	}

	.fapiaoList-item-info>span:first-child {
		color: #999999;
		display: inline-block;
		width: 80px;
		text-align: left;
	}
</style>